<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style & Parameter Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const originX = 180;
    const originY = 250;
    const scaleA = 50;
    const scaleV = 30; // length for v₀
    const particleRadius = 4;

    // --- Helper function to draw an arrow ---
    function drawArrow(x1, y1, x2, y2) {
        const headlen = 10;
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = Math.atan2(dy, dx);

        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // 1. Draw Coordinate System
    drawArrow(30, originY, 480, originY); // x-axis
    drawArrow(originX, 380, originX, 50);  // y-axis

    // 2. Draw Axis Labels
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.fillText("y₀", originX + 20, 50);
    ctx.fillText("x₀", 470, originY + 20);
    ctx.fillText("O", originX - 15, originY + 15);
    
    // 3. Draw Ticks and Labels on x-axis
    ctx.font = "italic 18px 'Times New Roman'";
    const tickSize = 5;
    const tickPositions = [-1, 1, 2, 3];
    const tickLabels = ["-a", "a", "2a", "3a"];

    for (let i = 0; i < tickPositions.length; i++) {
        const x = originX + tickPositions[i] * scaleA;
        ctx.beginPath();
        ctx.moveTo(x, originY - tickSize);
        ctx.lineTo(x, originY + tickSize);
        ctx.stroke();
        ctx.fillText(tickLabels[i], x, originY + 20);
    }
    
    // 4. Draw Particles and their labels
    ctx.font = "italic 18px 'Times New Roman'";
    // P3 at (-a, 0)
    const p3x = originX - scaleA;
    ctx.beginPath();
    ctx.arc(p3x, originY, particleRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("P₃", p3x - 15, originY - 15);
    
    // P2 at (0, 0)
    const p2x = originX;
    ctx.beginPath();
    ctx.arc(p2x, originY, particleRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("P₂", p2x + 15, originY - 15);
    
    // P1 at (3a, 0)
    const p1x = originX + 3 * scaleA;
    ctx.beginPath();
    ctx.arc(p1x, originY, particleRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("P₁", p1x - 15, originY - 15);

    // 5. Draw Velocity Vectors and their labels
    // P1 vector (3v₀ up)
    const v1_len = 3 * scaleV;
    drawArrow(p1x, originY, p1x, originY - v1_len);
    ctx.fillText("3v₀", p1x - 25, originY - v1_len + 5);

    // P2 vector (3v₀ up)
    const v2_len = 3 * scaleV;
    drawArrow(p2x, originY, p2x, originY - v2_len);
    ctx.fillText("3v₀", p2x - 25, originY - v2_len + 5);

    // P3 vector (v₀ down)
    const v3_len = scaleV;
    drawArrow(p3x, originY, p3x, originY + v3_len);
    ctx.fillText("v₀", p3x - 15, originY + v3_len);
    
    // 6. Draw Frame Label "S系"
    ctx.font = "italic 24px 'Times New Roman'";
    ctx.fillText("S", 60, 80);
    ctx.font = "20px 'KaiTi', 'STKaiti', serif";
    ctx.fillText("系", 75, 80);

</script>
</body>
</html>